<template>
  <div class="generate">
    <div class="generate_top">
      <div class="generate_top1">
        <p>门店协议模板列表</p>
        <el-button type="primary" @click="piliang_add" class="piliang_xiazai" icon="el-icon-download">批量下载协议模板</el-button>
      </div>
      <div class="generate_top2">
        <el-input
          placeholder="关键词搜索"
          v-model="sousuo_input"
          class="sousuo_inputnum"
          clearable>
        </el-input>

        <el-button class="sousuo_an" @click="sousuo_add" type="primary" icon="el-icon-search"></el-button>
      </div>
    </div>

    <!-- 表格 -->
    <div class="generate_table">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="协议编号"
          show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="经销商名称"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="men_id"
          label="门店编号"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="men_name"
          label="门店名称"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          label="协议金额"
          show-overflow-tooltip>
          <template slot-scope="scope">{{str_number.str_num(scope.row.men_mony)}}</template>
        </el-table-column>
        <el-table-column
          prop="caozuo"
          show-overflow-tooltip
          width="100"
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              class="table_button"
              @click="handleDelete(scope.$index, scope.row)">下载协议</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 下一步 核销资料上传 -->
    <div class="add_xiazai" @click="generate_click">下一步 核销资料上传</div>
  </div>
</template>

<script>
  export default{
    name:"generate",
    data(){
      return{
        // 搜索内容
        sousuo_input:'',

        // 表格数据
        tableData: [{
          id: 'PO202104058888 ',
          name: '上海麒麟物流有限公司上海麒 ',
          men_id: 'FDL202012321321',
          men_name:"绿源超市",
          men_mony:98
        }, {
          id: 'PO202104058888 ',
          name: '上海麒麟物流有限公司 ',
          men_id: 'FDL202012321321',
          men_name:"红孩子母婴店",
          men_mony:128
        }],
        multipleSelection: [],
        num:98,
      }
    },
    mounted() {

    },
    methods:{
      // 表格选择
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      // 表格操作按钮
      handleDelete(index,row){
        console.log(index,row)
      },
      // 批量下载协议模板
      piliang_add(){
        if(this.multipleSelection==""){
          this.$message({
            message:"请选择需要下载的协议模板",
            type:'warning'
          })
        }else{
           console.log(this.multipleSelection)
        }
      },
      // 确认搜索
      sousuo_add(){
        if(this.sousuo_input==""){
          this.$message({
            message:"请填写需要搜索的内容",
            type:'warning'
          })
        }else{
           console.log(this.sousuo_input)
        }
      },
      // 下一步 核销资料上传
       generate_click(){
         this.$emit("fun",3)
       },
      // elementUI文档的默认选择多少行
      // toggleSelection(rows) {
      //   console.log(rows)
      //   if (rows) {
      //     rows.forEach(row => {
      //       this.$refs.multipleTable.toggleRowSelection(row);
      //     });
      //   } else {
      //     this.$refs.multipleTable.clearSelection();
      //   }
      // },
    },

  }
</script>

<style scoped="scoped" lang="scss">
  .generate{
    padding: 0rem 0.4rem;

    .generate_top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      .generate_top1{
        display: flex;
        align-items: center;
        font-size: 0.26rem;
        font-weight: bold;

        p{
          margin-right: 0.36rem;
        }
      }

      .generate_top2{
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .piliang_xiazai{
          border-radius: 0.1rem;
          display: flex;
          align-items: center;

          >>> .el-icon-download{
            font-size: 0.34rem!important;
          }
          >>>span{
            font-size: 0.24rem!important;
          }
        }

        .sousuo_inputnum{
          margin: 0 0.2rem;
          width: 50%;

          >>> .el-input__inner{
            border-radius: 0.1rem;
          }
        }

        .sousuo_an{
          padding: 0.1rem!important;
          border-radius: 0.1rem;

          >>> .el-icon-search{
            font-size: 0.34rem!important;
          }
        }
      }
    }
    .generate_table{
      margin: 0.4rem 0;

      .table_button{
        background-color: transparent;
        border: 1px solid #29A7FA;
        border-radius: 0.3rem;
        color: #29A7FA;
      }

      >>> .el-table th.is-leaf{
        border-bottom: 1px solid #CFECFF;
      }
      >>> .el-table__row .cell{
        color: #333;
        font-size: 0.22rem;
      }
      >>> .is-leaf .cell{
        color: #6FB0DB;
        font-weight: normal;
        font-size: 0.22rem;
      }
      >>> .el-checkbox__inner{
        border: 1px solid #29A7FA;
        width: 0.28rem!important;
        height: 0.28rem!important;
        border-radius: 0.05rem;
      }
      >>> .el-checkbox__input.is-indeterminate .el-checkbox__inner::before{
        top: 50%;
        transform: translateY(-50%) scale(.5);
      }
      >>> .el-checkbox__inner::after{
        top: 50%;
        left: 50%;
        width: 0.06rem;
        height: 0.15rem;
        transform: translate(-50%,-60%) rotate(45deg) scaleY(0);
      }
      >>> .el-checkbox__input.is-checked .el-checkbox__inner::after{
        transform: translate(-50%,-60%) rotate(45deg) scaleY(1);
      }
    }
    .add_xiazai{
      position: absolute;
      bottom: 0;
      left: 0;
      font-size: 0.22rem;
      color: #fff;
      background-color: #29A7FA;
      padding: 0.2rem 0.3rem;
      display: inline-block;
      margin: 0 0.3rem 0.45rem 0.3rem;
      border-radius: 0.4rem;
      cursor: pointer;
    }
  }
</style>
